﻿<!DOCTYPE html>
<html ng-app="hrApp">
<head>
    <title>HR App</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var employees = [
            { id: 10001, name: "Jerry", gender: 1, email: "jerry@etc.com", birthday: "1979-01-01" },
            { id: 10002, name: "Jam", gender: 0, email: "jam@etc.com", birthday: "1980-01-01" },
            { id: 10003, name: "David", gender: 1, email: "david@etc.com", birthday: "1981-01-01" },
            { id: 10004, name: "Mike", gender: 1, email: "mike@etc.com", birthday: "1982-01-01" }
        ];

        var hrApp = angular.module('hrApp', [])
            .controller("EmployeeCtrl", function ($scope) {
                $scope.employees = employees;
                $scope.addEmployee = function (newEmployee) {
                    employees.push({
                        id: newEmployee.id,
                        name: newEmployee.name,
                        gender: newEmployee.gender,
                        email: newEmployee.email,
                        birthday: newEmployee.birthday
                    });
                };
        });
    </script>
</head>
<body ng-controller="EmployeeCtrl">
    <div class="container">
        <div class="col-md-6">
            <div class="page-header">
                <h1>
                    员工信息列表
                </h1>
            </div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>员工编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>电子邮件</th>
                        <th>出生日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="employee in employees">
                        <td>{{employee.id}}</td>
                        <td>{{employee.name}}</td>
                        <td>{{employee.gender == 1 ? "男" : "女"}}</td>
                        <td><a ng-href="mailto:{{employee.email}}">{{employee.email}}</a></td>
                        <td>{{employee.birthday | date:"yyyy-MM-dd"}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h1>
                    添加新员工
                </h1>
            </div>
            <form name="employeeForm" novalidate ng-submit="addEmployee(newEmployee)">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">员工编号：</label>
                        <div class="col-md-6">
                            <input class="form-control" ng-model="newEmployee.id" required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">员工姓名：</label>
                        <div class="col-md-6">
                            <input class="form-control" ng-model="newEmployee.name" required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">性别：</label>
                        <div class="col-md-6">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="0" ng-model="newEmployee.gender" required />女
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1" ng-model="newEmployee.gender" required />男
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">电子邮件：</label>
                        <div class="col-md-6">
                            <input class="form-control" ng-model="newEmployee.email" type="email" required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">出生日期：</label>
                        <div class="col-md-6">
                            <input type="date" class="form-control" ng-model="newEmployee.birthday" required />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-3">
                            <button class="btn btn-primary" type="submit"
                                    ng-disabled="employeeForm.$invalid">添加</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
